<!-- src/views/system/user/PersonTrackLine.vue -->
<template>
  <div></div>
</template>

<script>
export default {
  name: 'PersonTrackLine',
  props: {
    map: {
      type: Object,
      required: true
    },
    trackData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      polyline: null, // 轨迹线
      startMarker: null, // 起点标记
      endMarker: null, // 终点标记
      personMarker: null, // 移动的人员标记
      personInfoWindow: null, // 人员信息窗口
      currentIndex: 0, // 当前位置索引
      timer: null, // 动画定时器
      movingSpeed: 30, // 移动速度（毫秒）
      allPath: [], // 所有路径点
      drawnPath: [], // 已绘制的路径点
      userInfo: null // 用户信息
    }
  },
  watch: {
    trackData: {
      handler(newVal) {
        console.log('PersonTrackLine 收到轨迹数据:', newVal);
        if (newVal && newVal.response && newVal.response.data) {
          this.clearTrack();
          this.drawTrack(newVal.response.data);
        } else {
          this.clearTrack();
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 清除轨迹
    clearTrack() {
      // 停止动画
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }

      // 清除轨迹线
      if (this.polyline) {
        this.polyline.setMap(null);
        this.polyline = null;
      }

      // 清除起点标记
      if (this.startMarker) {
        this.startMarker.setMap(null);
        this.startMarker = null;
      }

      // 清除终点标记
      if (this.endMarker) {
        this.endMarker.setMap(null);
        this.endMarker = null;
      }

      // 清除人员标记
      if (this.personMarker) {
        this.personMarker.setMap(null);
        this.personMarker = null;
      }

      // 清除信息窗口
      if (this.personInfoWindow) {
        this.personInfoWindow.close();
        this.personInfoWindow = null;
      }

      this.currentIndex = 0;
      this.allPath = [];
      this.drawnPath = [];
      this.userInfo = null;
    },

    // 绘制轨迹
    drawTrack(trackPoints) {
      if (!trackPoints || trackPoints.length === 0) {
        console.log('没有轨迹数据');
        return;
      }

      console.log('开始绘制轨迹，点数:', trackPoints.length);

      // 保存用户信息（从 trackData 中获取）
      if (this.trackData && this.trackData.user) {
        this.userInfo = this.trackData.user;
      }

      // 转换坐标点
      this.allPath = trackPoints.map(point => [
        parseFloat(point.longitude),
        parseFloat(point.latitude)
      ]);

      // 初始化已绘制路径为起点
      this.drawnPath = [this.allPath[0]];

      // 创建初始轨迹线（只有起点）
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.drawnPath,
        strokeColor: '#00ff00', // 绿色轨迹线
        strokeWeight: 4,
        strokeOpacity: 0.8,
        lineJoin: 'round',
        lineCap: 'round'
      });

      // 创建起点标记
      this.startMarker = new AMap.Marker({
        map: this.map,
        position: this.allPath[0],
        icon: new AMap.Icon({
          size: new AMap.Size(32, 32),
          image: '',
          imageSize: new AMap.Size(32, 32)
        }),
        offset: new AMap.Pixel(-16, -16),
        title: '起点'
      });

      // 创建终点标记
      this.endMarker = new AMap.Marker({
        map: this.map,
        position: this.allPath[this.allPath.length - 1],
        icon: new AMap.Icon({
          size: new AMap.Size(32, 32),
          image: '',
          imageSize: new AMap.Size(32, 32)
        }),
        offset: new AMap.Pixel(-16, -16),
        title: '终点'
      });

      // 创建移动的人员标记
      this.personMarker = new AMap.Marker({
        map: this.map,
        position: this.allPath[0],
        icon: new AMap.Icon({
          size: new AMap.Size(40, 40),
          image: require('@/assets/images/work-green.png'),
          imageSize: new AMap.Size(40, 40)
        }),
        offset: new AMap.Pixel(-16, -32)
      });

      // 创建人员信息窗口
      this.personInfoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
        content: this.getPersonInfoContent()
      });

      // 绑定人员标记点击事件
      this.personMarker.on('click', () => {
        this.personInfoWindow.open(this.map, this.personMarker.getPosition());
      });

      // 自动打开信息窗口
      this.personInfoWindow.open(this.map, this.personMarker.getPosition());

      // 开始动画
      this.startAnimation();
    },

    // 开始动画
    startAnimation() {
      this.currentIndex = 0;

      this.timer = setInterval(() => {
        if (this.currentIndex < this.allPath.length - 1) {
          this.currentIndex++;

          // 移动人员标记
          this.personMarker.setPosition(this.allPath[this.currentIndex]);

          // 添加新的路径点
          this.drawnPath.push(this.allPath[this.currentIndex]);

          // 更新轨迹线
          this.polyline.setPath(this.drawnPath);

          // 更新信息窗口位置
          if (this.personInfoWindow) {
            this.personInfoWindow.setPosition(this.allPath[this.currentIndex]);
          }
        } else {
          // 到达终点，停止动画
          clearInterval(this.timer);
          this.timer = null;
          console.log('轨迹播放完成');
        }
      }, this.movingSpeed);
    },

    // 获取人员信息窗口内容
    getPersonInfoContent() {
      if (!this.userInfo) {
        return '<div class="tech-worker-info-container">人员信息加载中...</div>';
      }

      const statusClass = this.userInfo.status === '1' ? 'worker-icon-green' : 'worker-icon';
      const name = this.userInfo.userName || this.userInfo.name || '未知人员';
      const telephone = this.userInfo.telephone || this.userInfo.phone || '暂无电话';
      const userNo = this.userInfo.userNo || (this.trackData && this.trackData.params ? this.trackData.params.userNo : '') || '暂无';
      const workNo = (this.trackData && this.trackData.order && this.trackData.order.workNo) ||
        (this.trackData && this.trackData.params ? this.trackData.params.workNo : '') ||
        this.userInfo.workNo || '暂无';

      return `
        <div class="tech-worker-info-container">
          <div class="tech-worker-info-header">
            <div class="${statusClass}">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="7" r="4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="tech-worker-title">
              <span>${name}(${telephone})</span>
              <span class="tech-worker-userno">人员编号：${userNo}</span>
              <span class="tech-worker-workno">工单：${workNo}</span>
            </div>
          </div>
        </div>
      `;
    }
  },
  beforeDestroy() {
    this.clearTrack();
  }
}
</script>

<style>
/* 人员信息窗口样式 */
.tech-worker-info-container {
  background: linear-gradient(145deg, #0c1e3e, #1a3a6a);
  border-radius: 12px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(33, 150, 243, 0.4),
    inset 0 0 15px rgba(33, 150, 243, 0.3);
  border: 1px solid rgba(79, 195, 247, 0.5);
  overflow: hidden;
  min-width: 220px;
  transform-style: preserve-3d;
  position: relative;
}

.tech-worker-info-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
}

.tech-worker-info-header {
  background: linear-gradient(90deg, #0277bd, #0288d1);
  color: white;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tech-worker-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.2;
}

.tech-worker-userno,
.tech-worker-workno {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.worker-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(223, 6, 6);
  animation: blink 1.5s infinite;
  box-shadow: 0 0 15px rgba(223, 6, 6, 0.7);
}

.worker-icon-green {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgb(29, 235, 11);
  animation: blinkG 1.5s infinite;
  box-shadow: 0 0 15px rgba(29, 235, 11, 0.7);
}

@keyframes blinkG {
  0% {
    box-shadow: 0 0 15px rgba(29, 235, 11, 0.7);
    border-color: rgba(29, 235, 11, 0.8);
  }
  50% {
    box-shadow: 0 0 25px rgba(29, 235, 11, 1);
    border-color: rgba(29, 235, 11, 1);
  }
  100% {
    box-shadow: 0 0 15px rgba(29, 235, 11, 0.7);
    border-color: rgba(29, 235, 11, 0.8);
  }
}

@keyframes blink {
  0% {
    box-shadow: 0 0 15px rgba(223, 6, 6, 0.7);
    border-color: rgba(223, 6, 6, 0.8);
  }
  50% {
    box-shadow: 0 0 25px rgba(223, 6, 6, 1);
    border-color: rgba(223, 6, 6, 1);
  }
  100% {
    box-shadow: 0 0 15px rgba(223, 6, 6, 0.7);
    border-color: rgba(223, 6, 6, 0.8);
  }
}
</style>
